<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="font/fonts.css" rel="stylesheet" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="js/carousel.css" media="screen" alt=""/>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.carousel.min.js"></script>
<script type="text/javascript">
	var carousel;
	jQuery(document).ready(function($){
		carousel = $('#carousel').carousel(
		{
			width: 1000, 
			height: 300, 
			itemWidth:120, 
			horizontalRadius:350, 
			verticalRadius:75, 
			mouseScroll:true, 
			scrollOnClick:true, 
			resize:false, 
			scaleRatio:0.4, 
			scrollbar:false, 
			tooltip:false,
			itemClick:onItemClick,
			itemMouseOver:onItemMouseOver,
			mouseWheel:true, 
			mouseWheelReverse:true
		});
	});	
	function onItemClick(event) {
		// open the large image
		//$.facebox({image:event.data.bigImage});
		// disable the mouse scrollgin
		//carousel.stopMouseScroll();
	}
	function onItemMouseOver(event) {
		// open the large image
		//$.facebox({image:event.data.bigImage});
		// disable the mouse scrollgin
		//carousel.stopMouseScroll();
	}
	// when the large image is closed, enable the mouse scrolling
	//$(document).bind('afterClose.facebox', function() { carousel.startMouseScroll(); })
</script>
</head>
<body class="bg_0">
<div id="container">
    <div id="menu">
    	<div id="logo">
        <a href="index.php"> <img src="img/logo.png" border="0"/></a>
        </div><!--logo-->
    	<ul class="menu-lista">
            <li class="primeiro"><a href="#">A EMPRESA</a></li>
            <li><a href="#"> PRODUTOS</a></li>
            <li style="margin-right:90px"><a href="#">RECEITAS</a></li>
            
            <li style="margin-left:60px"><a href="#">ONDE COMPRAR</a></li>
            <li><a href="#">NOTÍCIAS </a></li>
            <li><a href="#">CONTATO </a></li>
        </ul>
    </div><!--menu-->
    <div id="miolo" style="width:1024px; margin:0 auto;">
        <div id="wide-wrapper">
            <ul id="carousel">
                <li>
                    <img src="img/queijo-prato.png" alt="teste" />
                    <p class="titulo">Image 1</p>
                </li>
                <li>
                    <img src="img/requijao-barra.png" alt="" />
                </li>
                <li>
                    <img src="img/queijo-padrao.png" alt="" />
                </li>
                <li>
                    <img src="img/ricota.png" alt="" />
                </li>
                <li>
                    <img src="img/queijo.png" alt="" />
                </li>
                <li>
                    <img src="img/coalhada.png" alt="" />
                </li>
                <li>
                    <img src="img/creme-de-leite.png" alt="" />
                </li>
                <li>
                    <img src="img/requijao-cremoso.png" alt="" />
                </li>
                <li>
                    <img src="img/cottage.png" alt="" />
                </li>
                <li>
                    <img src="img/manteiga.png" alt="" />
                </li>
            </ul>
        </div>
	</div><!--miolo-->
	<div id="rodape">
        <div class="rodape_fixo">
        	<p align="right"><a href="#" class="slideD">MAPA DO SITE</a></p>
        </div><!--rodape_fixo-->
        <div class="mapa">
        </div><!--mapa-->
	</div><!--rodape-->
</div><!--container-->
<script type="text/javascript">
$(".slideD").click(function () {
	if ($(".mapa").is(":hidden")) {
		$(".mapa").slideDown("slow");
		//document.getElementById("seta").src = "images/setaaberto.png";
	}
	else
	{
		$(".mapa").slideUp("slow");
		//document.getElementById("seta").src = "images/setafechado.png";
	}
});
</script>
</body>
</html>